@extends('layouts.base')
@section('styles')
    @parent
    <link rel="stylesheet" href="{{asset('assets/plugin/dropify/css/dropify.min.css')}}">
    <!--图片上传-->
    @include('cropper.imageHead')
    <script>
        var saveUrl = "temp"; //图片存放文件夹
    </script>
@endsection
@section('content')
    @parent
    <div id="wrapper">
        <div class="main-content container">
            <div class="row small-spacing">

                <div class="box-content">
                    <h3 class="box-title">站点管理</h3>
                    <hr>
                    <div class="col-md-4">
                        <div class="cmodel box-content card" id="editCat">
                            <form class="form-horizontal" id="editForm" action="{{route('sites.store')}}"
                                  method='POST'
                                  enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <h4 class="box-title bg-warning">添加站点</h4>
                                <div class="card-content">
                                    <div class="form-group">
                                        <label for="cname" class="col-sm-3 control-label">名称</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="name" class="form-control" id="cname"
                                                   placeholder="网站名称" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="cslug" class="col-sm-3 control-label">网站完<br>整链接</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="url" class="form-control" id="cslug"
                                                   placeholder="http://xxx.com" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="cslug" class="col-sm-3 control-label">背景色</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="bgcolor" class="form-control" id="ccolor"
                                                   placeholder="FFFFFF" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="cweight" class="col-sm-3 control-label">水印<br>图片</label>
                                        <div class="col-sm-9">
                                            {{--<input type="text" name="watermark" class="form-control" id="watermark"--}}
                                            {{--placeholder="水印图片" required>--}}
                                            <div class="col-lg-10 site-demo-upload">
                                                <img class="upload-show-img"
                                                     src="/static/shearphoto/images/background.jpg">
                                                <input type="hidden" class="upload-show-input" value=""
                                                       name="watermark"/>
                                                <div class="site-demo-upbar">
                                                    <div class="layui-box layui-upload-button upload-check-img">
                                                        <span class="layui-upload-icon"><i class="layui-icon"></i>查看图片</span>
                                                    </div>

                                                    <div class="layui-box layui-upload-button site-upfile-layer">
                                                        <span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>
                                                    </div>

                                                    <div class="layui-box layui-upload-button upload-delete-img">
                                                        <span class="layui-upload-icon"><i class="layui-icon"></i>删除图片</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{--<div class="form-group">--}}
                                        {{--<label for="cweight" class="col-sm-3 control-label">关联<br>分类</label>--}}
                                        {{--<div class="col-sm-9">--}}
                                            {{--<div class="checkbox info">--}}
                                                {{--@foreach($cates as $cate)--}}
                                                    {{--<div style="display: inline-block; width:45%;">--}}
                                                        {{--<input type="checkbox" name="category_id[]"--}}
                                                               {{--value="{{$cate['id']}}"--}}
                                                               {{--id="checkbox-{{$cate['id']}}">--}}
                                                        {{--<label for="checkbox-{{$cate['id']}}">{{$cate['name']}}</label>--}}
                                                    {{--</div>--}}
                                                {{--@endforeach--}}
                                            {{--</div>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                    <div class="form-group text-center">
                                        <button type="reset" class="btn btn-default waves-effect waves-light">重置
                                        </button>
                                        <button type="submit" id="submit"
                                                class="btn btn-primary waves-effect waves-light">
                                            添加
                                        </button>
                                    </div>

                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class=" box-content card denger">
                            <h4 class="box-title">站点列表</h4>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th class="text-center">#id</th>
                                        <th class="text-center">名称</th>
                                        <th class="text-center">地址</th>
                                        <th class="text-center col-md-6">水印图</th>
                                        <th class="text-center">编辑/删除</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($sites as $site)
                                        <tr>
                                            <th scope="row">{{$site->id}}</th>
                                            <td>{{$site->name}}&nbsp;({{$site->categorys()->count()}})</td>
                                            <td>
                                                <a href="{{$site->url}}" target="_blank">
                                                    <button class="btn btn-success btn-bordered waves-effect waves-light">{{$site->url}}</button>
                                                </a>
                                            </td>
                                            <td>
                                                <img src="{{$site->watermark}}" width="130px" alt="">
                                                <button type="button" data-remodal-target="remodal"
                                                        class="q_bigimg btn btn-info btn-circle btn-xs waves-effect waves-light">
                                                    <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                                                </button>
                                            </td>
                                            <td class="text-right">
                                                <button type="button" data-remodal-target="remodal_edit"
                                                        class="editbtn btn btn-info btn-xs waves-effect waves-light"
                                                        data-id="{{$site['id']}}" data-url="{{$site['url']}}"
                                                        data-watermark="{{$site['watermark']}}"
                                                        data-color="{{$site['bgcolor']}}"
                                                        data-action="{{url('admin/sites/'.$site['id'])}}"
                                                        data-name="{{$site['name']}}" data-ids="{{$site['ids']}}">编辑
                                                </button>
                                                <form action="{{route('sites.destroy',$site->id)}}" method="post"
                                                      style="display: inline-block;">{{ csrf_field() }}{{ method_field('DELETE') }}
                                                    <button type="submit"
                                                            class="btn btn-orange btn-xs waves-effect waves-light">删除
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <!--.box-content-->
            </div>
            <!--.small-spacing-->
        </div>
    </div>
    <!--#wrapper-->
    {{--图片展示窗口--}}
    <div class="remodal" data-remodal-id="remodal" role="dialog" aria-labelledby="modal1Title"
         aria-describedby="modal1Desc">
        <div class="remodal-content">
            <img src="" alt="" style="max-width:1000px">
        </div>
        <button data-remodal-action="confirm" class="remodal-confirm">Close</button>
    </div>
    {{--修改站点窗口--}}
    <div class="remodal" data-remodal-id="remodal_edit" role="dialog" aria-labelledby="modal1Title"
         aria-describedby="modal1Desc">
        <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
        <div class="remodal-content">
            <div class="cmodel box-content card" id="editCat">
                <form class="form-horizontal" id="updateForm" action=""
                      method='POST'
                      enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="put">
                    <input type="hidden" name="id" value="">
                    <h4 class="box-title bg-warning">修改站点</h4>
                    <div class="card-content">
                        <div class="form-group">
                            <label for="cname" class="col-sm-3 control-label">名称</label>
                            <div class="col-sm-9">
                                <input type="text" name="name" class="form-control" id="cname"
                                       placeholder="网站名称" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cslug" class="col-sm-3 control-label">网站完<br>整链接</label>
                            <div class="col-sm-9">
                                <input type="text" name="url" class="form-control" id="cslug"
                                       placeholder="http://xxx.com" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cslug" class="col-sm-3 control-label">背景色</label>
                            <div class="col-sm-9">
                                <input type="text" name="bgcolor" class="form-control" id="ccolor"
                                       placeholder="FFFFFF" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cweight" class="col-sm-3 control-label">水印<br>图片</label>
                            <div class="col-sm-9">
                                {{--<input type="text" name="watermark" class="form-control" id="watermark"--}}
                                {{--placeholder="水印图片" required>--}}
                                <div class="col-lg-10 site-demo-upload">
                                    <img class="upload-show-img"
                                         src="/static/shearphoto/images/background.jpg">
                                    <input type="hidden" class="upload-show-input" value=""
                                           name="watermark"/>
                                    <div class="site-demo-upbar">
                                        <div class="layui-box layui-upload-button upload-check-img">
                                            <span class="layui-upload-icon"><i class="layui-icon"></i>查看图片</span>
                                        </div>

                                        <div class="layui-box layui-upload-button site-upfile-layer">
                                            <span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>
                                        </div>

                                        <div class="layui-box layui-upload-button upload-delete-img">
                                            <span class="layui-upload-icon"><i class="layui-icon"></i>删除图片</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{--<div class="form-group">--}}
                            {{--<label for="cweight" class="col-sm-3 control-label">关联<br>分类</label>--}}
                            {{--<div class="col-sm-9">--}}
                                {{--<div class="checkbox info">--}}
                                    {{--@foreach($cates as $cate)--}}
                                        {{--<div style="display: inline-block; width:45%;text-align: left;">--}}
                                            {{--<input type="checkbox" class="category" name="category_id[]"--}}
                                                   {{--value="{{$cate['id']}}"--}}
                                                   {{--id="ck{{$cate['id']}}">--}}
                                            {{--<label for="ck{{$cate['id']}}">{{$cate['name']}}</label>--}}
                                        {{--</div>--}}
                                    {{--@endforeach--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        <div class="form-group text-center">
                            <button data-remodal-action="cancel" class="remodal-cancel btn-sm">取消</button>
                            <button type="submit" class="remodal-confirm">修改</button>
                            <button type="reset" class="display-none">清空</button>
                        </div>

                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection @section('scriptsafter') @parent
<script>
    //查看水印图大图
    $(document).on('click', '.q_bigimg', function (e) {
        var button = $(this);
        var src = button.prev().prop('src');
        $('[data-remodal-id=remodal]').find('img').prop("src", src);
    })
    $(".editbtn").on('click', function (e) {
        var button = $(e.target);
        var modal = $('#updateForm');
        var cid = button.data('id');
        var cname = button.data('name');
        var curl = button.data('url');
        var cwatermark = button.data('watermark');
        var color = button.data('color');
        var ids = String(button.data('ids'));
        $('#updateForm').attr('action', button.data('action'));
        ids = ids.indexOf(',') ? ids.split(',') : ids.split('');
        modal.find('button[type=reset]').click();
        modal.find('.category').each(function (i, v) {
            var cval = v.value;
            for (var s in ids) {
                if (cval == ids[s]) {
                    $(this).next().click();
                }
            }
        })
        modal.find('input[name=id]').val(cid);
        modal.find('input[name=bgcolor]').val(color);
        modal.find('input[name=name]').val(cname);
        modal.find('input[name=url]').val(curl);
        cwatermark ? $('.layui-upload-button').show() : '';
        modal.find('input[name=watermark]').val(cwatermark).prev('img').prop('src', cwatermark);
    });
</script>

@endsection